<template>
  <div>
    <div class="list-header"></div>
    <div  class="m-header" >
      <div>
        <i class="icon-back" @click="$router.go(-1)" ></i>
        <div class="select-bt">
          <p class="name" >歌单</p><!--:class= "selectIndex===0?'active':''" -->
          <i class="icon-search"  @click="search()" ></i>
        </div>
        <i class="icon-list-circle" @click="operation()"></i><!--operation()-->
      </div>
    </div>
  </div>

</template>

<script type="text/ecmascript-6">
    export default {
      name: "",
      data() {
          return {
          }
      },
      methods:{
        search(){
          console.log('android---------搜索');
        },
        operation(){
          console.log('操作----调用android');
          window.android.getClient('给老子调起来')

        }
      },
      created:function(){
        window.callJs = this.search()
      },
      mounted(){

      }
    }
</script>

<style lang="scss" scoped>
  @import "../../style/font-icon/style.css";
  @import '../../style/mixin';
  .m-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    color: rgb(241, 243, 244);
    font-size: 35px;
    /*background-color: rgba(210, 57, 48,1);*/
    height: 100px;
    @include wh(100%,100px)
  }
  .list-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
    @include wh(100%,100px)
  }
  .m-header div:first-child{
    height: inherit;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top: 3px;
  }
  .m-header i{
    padding: 38px;
  }
  .select-bt{
    height: 80px;
    width: 100%;
    display:flex;
    align-items:center;
    justify-content: space-between;
  }
  .m-header .icon-list-circle{
   padding-right: 36px;
 }
  .name{
    font-size: 34px;
  }
</style>
